
{extend name="public/common"/}
{block name="head"}
<style>

  .login-img {
    margin-top: 1em;
    height: 5em;
    -moz-border-radius: 5em;
    -webkit-border-radius: 5em;
    border-radius: 5em;
  }

  img {
    display: inline;
  }

</style>
{/block}
{block name="header"}
<header class="aui-bar aui-bar-nav" id="aui-header">
  <a class="aui-btn aui-pull-left" href="javascript:history.go(-1);">
    <span class="aui-iconfont aui-icon-left"></span>
  </a>
  <div class="aui-title">忘记密码</div>
  <a class="aui-pull-right"  >
    <span class="aui-iconfont aui-icon-question"></span>
  </a>
</header>
{/block}
{block name="body"}
<section class="aui-content aui-margin-t-15" style="text-align: center;">
  <div class="weui-flex__item">
    <img class="login-img" src="__IMG__/ren.png" style="display:initial;">
  </div>
</section>

<section class="aui-content aui-margin-t-15">
  <ul class="aui-list aui-form-list">
    <li class="aui-list-item">
      <div class="aui-list-item-inner">
        <div class="aui-list-item-label aui-border-r color-orange">
          手机号 <small class="aui-margin-l-5 aui-text-warning">+86</small>
        </div>
        <div class="aui-list-item-input aui-padded-l-10">
          <input type="number" pattern="[0-9]*" placeholder="输入手机号" id="mobile">
        </div>
      </div>
    </li>

    <li class="aui-list-item">
      <div class="aui-list-item-inner">
        <div class="aui-list-item-input" style="width: auto;">
          <input type="number" pattern="^1[345678][0-9]{9}$" placeholder="输入短信验证码" id="sms_code">
        </div>
        <div class="aui-list-item-label aui-margin-r-15 get-code" style="width: 6rem;">
          <div id="TencentCaptcha"
               data-appid="{:config('setting.tencent_captcha_appid')}"
               data-cbfn="callback"
               type="button"  class="aui-btn aui-btn-info" style="width: 6rem;">获取验证码</div>
          <div id="count_down" type="button"  class="aui-btn aui-hide" style="width: 6rem;">60</div>
        </div>
      </div>
    </li>
    <li class="aui-list-item">
      <div class="aui-list-item-inner">
        <div class="aui-list-item-input" style="width: auto;">
          <input type="password" pattern="^1[345678][0-9]{9}$" id="password" placeholder="输入密码">
        </div>
        <div class="aui-list-item-label aui-margin-r-15 get-code" style="width: 6rem;">
          <i class="aui-iconfont aui-icon-display" tapmode onclick="changePwd()"></i>
        </div>
      </div>
    </li>
  </ul>
</section>

<section class="aui-content-padded">
  <div class="aui-btn aui-btn-block aui-btn-info aui-btn-sm" onclick="submit()">设置密码</div>
</section>
{/block}
{block name="script"}
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
<script type="text/javascript">
  window.callback = function(res){
    console.log(res)
    if(res.ret === 0){
      getSmsCode(res);
    }
  }

  function  getSmsCode(res) {
    var mobile = $api.val($api.dom('#mobile'));
    if (!mobile) {
      $api.dom('#mobile').focus();
      toast.fail({
        title:'请输入手机号',
        duration:2000
      });
    } else {
      res['mobile'] = mobile;
      res['type'] = 'forget';
      $.ajax({
        type : 'post',
        url : "{:url('ucenter/Foreign/sms')}",
        data : res,
        dataType : 'json',
        timeout : 3000,
        success : function(data) {
          toast.hide();
          if (0 == data.code) {
            $("#TencentCaptcha").addClass('aui-hide');
            startCountDown();
            toast.success({
              title:data.message,
              duration:2000
            });
          } else {
            toast.fail({
              title:data.message,
              duration:2000
            });
          }

        },
        error : function(xhr, type) {
          toast.fail({
            title:type,
            duration:2000
          });
          toast.hide();
        }
      })
    }
  };

  function startCountDown() {
    // 倒计时开始
    if ($api.hasCls($api.dom('#count_down'),'aui-hide'))
    {
      $api.removeCls($api.dom('#count_down'),'aui-hide');
    }
    if (parseInt($api.html($api.dom('#count_down'))) == 1)
    {
      $api.html($api.dom('#count_down'),60);
      $api.addCls($api.dom('#count_down'),'aui-hide');
      $api.removeCls($api.dom('#TencentCaptcha'),'aui-hide');
    }else {
      $api.html($api.dom('#count_down'),parseInt($api.html($api.dom('#count_down'))) - 1);
      setTimeout("startCountDown()","1000");
    }
  }
  // 密码框更改
  function changePwd() {
    if ('password' == $api.attr($api.dom("#password"), 'type')) {
      $api.attr($api.dom("#password"), 'type', 'text');
    } else {
      $api.attr($api.dom("#password"), 'type', 'password');
    }
  }
  // 提交修改密码
  function submit () {
    if (!$api.val($api.dom('#sms_code'))) {
      $api.dom('#sms_code').focus();
      api.toast({
        msg: '请填写短信验证码',
        duration: 2000,
        location: 'bottom'
      });
      return false;
    }
    if (!$api.val($api.dom('#mobile'))) {
      $api.dom('#mobile').focus();
      api.toast({
        msg: '请填写手机号',
        duration: 2000,
        location: 'bottom'
      });
      return false;
    }
    if (!$api.val($api.dom('#password'))) {
      $api.dom('#password').focus();
      api.toast({
        msg: '请填写新密码',
        duration: 2000,
        location: 'bottom'
      });
      return false;
    }
    toast.loading({
      title:"密码修改请求中",
      duration:2000
    },function(ret){
      console.log(ret);
    });
    $.ajax({
      type : 'post',
      url : "{:url('ucenter/Foreign/forget')}",
      data : {
        account: $api.val($api.dom('#phone')),
        phone: $api.val($api.dom('#phone')),
        password: $api.val($api.dom('#password')),
        password_confirm: $api.val($api.dom('#password')),
        sms_code: $api.val($api.dom('#sms_code'))
      },
      dataType : 'json',
      timeout : 3000,
      success : function(data) {
        toast.hide();
        if (0 == data.code) {
          toast.success({
            title:data.message,
            duration:2000
          });
        } else {
          toast.fail({
            title:data.message,
            duration:2000
          });
        }

      },
      error : function(xhr, type) {
        toast.fail({
          title:type,
          duration:2000
        });
        toast.hide();
      }
    })
  };


</script>

{/block}
{block name="footer"}
{/block}